<template>
  <div>
    <div class="foot">
      <div class="foot-type">
        <div v-for="(item,index) in footTypelist"
             :key="index"
             :class="{select: index == selectindex}"
             v-html="item.type"
             @click="changeRouter(index)"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'foot',
  data () {
    return {
      footTypelist: [{ name: 'Home', type: '<i class="iconfont icon-changyonglogo40"></i><span>外卖</span>' }, { name: 'Joke', type: '<i class="iconfont icon-zhinanzhen"></i><span>搜索</span>' }, { name: 'Fanny', type: '<i class="iconfont icon-dingdan"></i><span>订单</span>' }, { name: 'Account', type: '<i class="iconfont icon-wode"></i><span>我的</span>' }],
      selectindex: 0,
    }
  },
  computed: {

  },
  methods: {
    changeRouter (index) {
      this.selectindex = index;
    }
  },
}
</script>

<style lang="less" scoped>
  *{
    padding: 0;
    margin: 0;
  }
.foot {
  .foot-type {
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    color: #333;
    div {
      width: 25%;
      font-size: 12px;
      padding: 5px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      i {
        font-size: 18px;
      }
    }
    .select {
      color: #3190e8;
    }
  }
}
</style>